import { useModel } from '@umijs/max';
import { Typography, theme, Checkbox, Tooltip, Modal, Tag, message } from 'antd';
import './index.less';
import IconFont from '@/components/IconFont';
import { CopyFilled, EditFilled, UserOutlined } from '@ant-design/icons';
import { doFetch } from '@/utils/doFetch';
import React, { useState, useEffect } from 'react';



const { Paragraph } = Typography


function OrgCard(props) {
  const { item, currentUser, refresh } = props;
  const { token } = theme.useToken();
  const { colorText, colorSecondary, colorOppsites, colorBgCard, colorPrimary } = token;
  const isCur = currentUser.orgId === item.id;
  const isMine = currentUser.id === item.orgCreateUserId;


  return (
    <div
      className={`itemcards`}
      style={{
        borderColor: isCur ? colorSecondary : colorOppsites,
        borderWidth: 2,
        borderStyle: 'solid',
        backgroundColor: isCur ? 'transparent' : colorOppsites,
        color: colorText,
        position: 'relative',
        boxSizing: 'border-box',
      }}
    >
      <div className="columns">
        <div className="centerl " style={{ gap: 6 }}>
          {
            isMine && <UserOutlined style={{ color: isCur ? colorPrimary : colorText, }} />
          }
          {
            isMine ?
              <div onClick={e => e.stopPropagation()}>
                <Paragraph
                  style={{ color: isCur ? colorPrimary : colorText, fontWeight: "bold" }}
                  editable={{
                    text: item?.orgName,
                    icon: <EditFilled style={{ color: colorPrimary }} />,
                    onChange: (value) => {
                      doFetch({ url: "/org/" + item.id, params: { orgName: value }, method: "PUT" }).then((res) => {
                        if (res.code === 0) {
                          refresh();
                        }
                      });
                    },
                  }}
                >
                  {item?.orgName}
                </Paragraph>
              </div>
              :
              <b style={{ color: isCur ? colorPrimary : colorText, }}>{item?.orgName}</b>
          }
          {/* <Tag color={isCur ? colorSecondary : colorText} style={{height:16,lineHeight:"15px",display:"block"}}>2</Tag> */}
        </div>
        <div style={{ marginTop: 4, fontSize: 12, opacity: 0.7 }} className='centerl'>
          <span>团队邀请码: &nbsp;</span>
          <Paragraph
            copyable={{
              icon: <CopyFilled style={{ color: colorText, fontSize: 12 }} />
            }}
            style={{ color: colorText, fontSize: 12 }}
          >{item.orgJoinKey}</Paragraph>
        </div>
      </div>

      {
        !isMine && <Tooltip title="退出团队" onClick={e => e.stopPropagation()} placement="bottomRight" arrow={false}>
          <div
            className="sorts"
            style={{ flexShrink: 0 }}
            onClick={(e) => {
              e.stopPropagation();
              Modal.confirm({
                title: `是否退出?`,
                content: '退出后将无法查看当前团队的项目',
                okText: '退出',
                cancelText: '我再想想',
                onOk: async () => {
                  doFetch({ url: '/user/leaveOrg', params: { orgId: item.id }, method: "PUT" }).then(
                    (res) => {
                      if (res.code === 0) {
                        message.success(
                          '退出团队成功！',
                        );
                        refresh();
                      }
                    },
                  );
                },
                okButtonProps: {
                  danger: true,
                },
              });
            }}
          >
            <IconFont
              type="icon-likai"
              rotate={180}
              style={{ color: colorPrimary, fontSize: 16 }}
            ></IconFont>
          </div>
        </Tooltip>
      }


    </div>

  );

}

export default OrgCard;
